<template>
  <div>
    <router-link to="/find">发现音乐</router-link> |
    <router-link to="/my/18">我的音乐</router-link> |
    <router-link to="/friend?name=小智">朋友</router-link>
    <!-- 7、设置路由挂载点 -->
    <router-view></router-view>
    <button @click="toPage">点我跳转到"朋友"页面</button>
  </div>
</template>

<script>
export default {
  methods:{
    /**
     * 编程式导航：传参方式
     * 方法一：
     * this.$router.push({
     *   path: "路由规则中定义的路由路径",
     *   query: {
     *     参数名：值
     *   }
     * })
     * 方法二：
     * this.$router.push({
     *  name: "路由规则中定义的路由name属性的值"
     *  query: { 参数名：值 },
     *  params: { 参数名：值 }
     * })
     * 接收：
     *  params传参 --- 接收：this.$route.params.参数名
     *  query传参 ---- 接收：this.$route.query.参数名
     * 
     * */ 
    toPage(){
      // 方式一：跳转页面并传参
      // this.$router.push({
      //   path: "/friend",
        // query: { // 传参成功
        //   age: 20,
        //   gender: "女"
        // }
        // params: { // 传参失败，因为params必须结合name属性一起使用
        //   age: 20,
        //   gender: "女"
        // }
      // })
    //  方式二：跳转页面并传参
      this.$router.push({
        name: "friend",
        // params:{ // 成功
        //   age: 20,
        //   gender: "女"
        // }
        query: { // 成功
          age: 20,
          gender: "女"
        }
      })
    }
  }
}
</script>

<style>
.router-link-active{
  color: red;
  font-weight: bold;
}
</style>